<template>
  <CommonCard title="交易用户数" :count="echartStore.storeEchartData.orderUser">
    <template #main>
      <div class="main">
        <v-chart :option="setOption()" autoresize></v-chart>
      </div>
    </template>
    <!-- 下半部分 -->
    <template #buttom>
      <span>退货率</span>
      <span>{{ echartStore.storeEchartData.returnRate }}</span>
    </template>
  </CommonCard>
</template>

<script setup lang="ts">
// 导入store
// import useEchartStore from '../../../../../../stores/echart'

import useEchartStore from '@/stores/echart'
import { computed } from 'vue'

const orderUserTrend = computed(() => {
  return echartStore.storeEchartData.orderUserTrend
})
const orderUserTrendAxis = computed(() => {
  return echartStore.storeEchartData.orderUserTrendAxis
})
// 获取仓库实例
const echartStore = useEchartStore()

// 声明函数 并在 配置项 option  中使用
const setOption = () => ({
  xAxis: {
    // x轴
    data: orderUserTrendAxis.value,
    show: false
  },
  yAxis: {
    show: false
  },
  tooltip: {}, // 鼠标划入提示信息
  grid: {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0
  },
  series: [
    {
      type: 'bar', // 柱状图
      data: orderUserTrend.value, // 数据
      barWidth: '60%'
    }
  ]
})
</script>

<style lang="scss" scoped>
.main {
  height: 50px;
}
</style>
